<template>
  <view class="">
    <cu-custom bgColor="bg-gradual-green" :isBack="true">
      <block slot="backText">返回</block>
      <block slot="content">管理训练计划</block>
    </cu-custom>

    <view class="quan">
      <view class="tou" style="border-bottom: 1upx solid #F1F1F1;">
        <view class="zuo">
          训练计划名称
        </view>
        <view class="you" style="width: 70%;">
          <input placeholder="请输入训练计划名称~" v-model="datas.name" />
        </view>
      </view>
      <view class="boz" style="border-bottom: 20upx solid #F1F1F1;">
        <input placeholder="训练计划备注" v-model="datas.remark" />
      </view>
      <view class="duz" style="border-bottom: 20upx solid #F1F1F1;">
        <view class="bianz">
          上课教练
        </view>
        <view style="display: flex; flex-wrap: wrap;">
        	<view class="items">
        		<view class="avatars u-f-ajc">
        			{{datas.teachName}}
        		</view>
        		<view style="padding: 0 20rpx 0 16rpx;font-size: 22rpx;">
        			{{datas.teachName}}
        		</view>
        	</view>
        	<!-- <view @click="jump" :data-src='"/pagesA/Preparation_plan/Choose_coach?id="+item.userId' style="display: flex;height: 60upx;line-height: 60upx;border-radius: 30upx;background-color: #F6F6F6;">
        		<view style="height: 60upx;line-height: 60upx;border-radius: 30upx;width: 60upx;text-align: center;font-size: 38upx;">
        			+
        		</view>
        		<view style="padding: 0 40upx 0 0upx;font-size: 22upx;">
        			添加
        		</view>
        	</view> -->
        </view>
      </view>
      <view class="duz" style="border-bottom: 1upx solid #F1F1F1;">
        <view class="bianz">
          课时调整
        </view>
        <view class="you">
          <input placeholder="请调整课时~" v-model="datas.courseCount" />
        </view>
      </view>
      <view class="duz" style="border-bottom: 1upx solid #F1F1F1;">
        <view class="bianz">
          课程单价
        </view>
        <view class="you">
          <input placeholder="请输入课程单价" v-model="datas.coursePrice" />
        </view>
      </view>
      <view class="duz" style="border-bottom: 20upx solid #F1F1F1;">
        <view class="bianz">
          有效期
        </view>
        <view style="width: 80%">
          <view class="uni-list">
            <view class="uni-list-cell">
              <view class="uni-list-cell-db">
                <picker mode="date" :value="datas.validity" :start="startDate" :end="endDate" @change="bindDateChange">
                  <view>
                    <input style="height: 100upx;line-height: 100upx;text-align: right;" type="text" disabled :value="datas.validity"
                      placeholder="请选择有效期" />
                  </view>
                </picker>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- <view class="duz">
					<view class="bianz">
						训练方案
					</view>
					<view class="biany">
						未关联 >
					</view>
				</view> -->
      <view @click="jump" :data-src="'./curriculum?id='+id" class="dibu u-f-ajc">
        <view class="diz">
          保存
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import timeJS from "../../common/time.js"
  export default {
    data() {
      return {
        datas: {},
        id: '',
        startDate:timeJS.gettime.getDate('start'),
        endDate:timeJS.gettime.getDate('end'),
      }
    },
    onLoad(e) {
      this.id = e.id;
      this.getData(e.id);
    },
    onReady() {

    },
    methods: {
      async getData(planId) {
        let {
          data: {
            datas
          }
        } = await this.$myRuquest({
          url: "/coach/training/getTrainingPlanDetail",
          data: {
            planId,
          }
        })
        console.log(datas)
        this.datas = datas;
        this.datas.validity = timeJS.gettime.yugi(-(this.datas.validity));
      },
      bindDateChange: function(e) {
        console.log('picker发送选择改变，携带值为', e.target.value);
        this.datas.validity = e.detail.value
      },
      async editData() {
        let data = {
          "id": parseInt(this.datas.id),
          "bId": 1,
          "courseCount": this.datas.courseCount,
          "coursePrice": this.datas.coursePrice,
          "courseType": this.datas.courseCount,
          "gymId": 0,
          "memberId": uni.getStorageSync("phyUser").userId,
          "name": this.datas.name,
          "remark": this.datas.remark,
          "teachIdList": this.datas.teachIdList,
          "validity": this.datas.validity ? timeJS.gettime.getNumberDays(this.datas.validity, timeJS.gettime.getDate({
            format: true
          })) : ''
        }
        let {
          data: {
            datas
          }
        } = await this.$myRuquest({
          url: "/coach/training/updateTrainingPlan",
          method: 'PUT',
          data,
					header:{"Content-Type":"application/json"},
        })
        this.datas = datas;
      },

      jump(e) {
        console.log(e.currentTarget.dataset.src)
        if (e.currentTarget.dataset.src.indexOf("curriculum")!=-1) {
          console.log('点击了保存')
          this.editData();
        }
        if (e.currentTarget.dataset.src == 'Not-yet-open') {
          uni.showModal({
            title: '提示',
            content: '功能即将开放',
            showCancel: false,
            confirmColor: "#DD524D",
          })
        } else {
          uni.redirectTo({
            url: e.currentTarget.dataset.src
          });
        }
      },

    }
  }
</script>

<style>
  .quan {
    background: #ffffff;
  }

  .tou {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 40upx;
  }

  .zuo {
    font: 24upx;
    font-weight: 555;
  }

  .you input {
    /* direction: rtl; */
    text-align: right;
    unicode-bidi: bidi-override;
  }

  .boz {
    padding: 40upx 40upx 100upx 40upx;
  }

  .duz {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30upx;
  }

  .bianz {
    font-size: 26upx;
    font-weight: 555;
  }

  .biany {
    color: #cccccc;
    font-size: 26upx;
    font-weight: 555;
  }

  .dibu {
    height: 100upx;
    background: #39BB9E;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
  }

  .diz {
    font-size: 40upx;
    color: #ffffff;
  }
  .items {
  	display: flex;height: 60upx;
  	line-height: 60upx;
  	border-radius: 30upx;
  	background-color: #F6F6F6;
  }
  .avatars {
  	width: 60upx;
  	height: 60upx;
  	border-radius: 30upx;
  	background-color: #1CBBB4;
  	color: #fff;
  	font-size: 20rpx;
  	overflow: hidden;
  	white-space: nowrap;
  	text-overflow: ellipsis;
  }
</style>
